{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script type="text/javascript" src="{% static 'jquery-1.2.6.js' %}"></script>
<body id="#body">
{#<form action="" method="get">#}
    姓名:<input type="text" name="name" id="name"><br>
    年龄范围:<input type="text" name="ageq" id="ageq"><input type="text" name="ageh" id="ageh"><br>
    <button id="btn" onclick="f()">查询</button>
{#</form>#}
<ul id="ul">

</ul>

<table>
    <tr>
        <td>姓名</td>
        <td>年龄</td>
    </tr>
    {% for i in a %}
        <tr>
            <td>{{ i.name }}</td>
            <td>{{ i.age }}</td>
        </tr>
    {% endfor %}

</table>
<script>
    function f() {
        var name = $('#name').val()
        var ageq = $('#ageq').val()
        var ageh = $('#ageh').val()
        if (name.length !== 0) {
            {#var cname = name#}
            $.ajax({
                url: '/cindex/',
                {#contenType: 'application/json',#}
                {#type: 'GET',#}
                {#traditional: true, //传过来的值是多个的话,与要加这个#}
                {#async: false,#}
                data: ({
                    'val': name,
                    'vaq':ageq,
                    'vah':ageh
                }),
                success: function (data) {
                    var dataa =JSON.parse(data)
                    {#console.log(JSON.parse(data));#}
                    var html =''
                    for (var i=0;i<dataa.length;i++){
                        html+="<li>"+dataa[i].name+'--'+dataa[i].age+'</li>'
                    }
                    $("#ul").html(html)
                    console.log(html);


                },
                error: function () {

                    alert('查询失败')

                }
            })
        } else {
            var b = '没有参数'
            alert(b)
        }

    }


</script>
</body>
</html>